
<template>
  <div id="poster">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="wind">
      <el-tab-pane label="注册" name="second">
        <!-- 注册 -->
        <el-form :model="registerFrom" status-icon :rules="registerRules" ref="registerFrom" label-position="left"
          label-width="60px" class="register-container">
          <h3 class="register-title">欢迎注册</h3>
          <el-form-item label="用户名" prop="username">

            <!-- <el-tooltip content="用户名5-12位" placement="top"> -->
            <el-input type="text" v-model="registerFrom.username" auto-complete="off" placeholder="请输入用户名"></el-input>
            <!-- </el-tooltip> -->
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-tooltip content="密码8-16位，不能含空格" placement="top">
              <el-input placeholder="请输入密码" type="password" v-model="registerFrom.password" auto-complete="off"
                show-password></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input placeholder="再次输入密码" type="password" show-password v-model="registerFrom.checkPass"
              auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="registerFrom.email" auto-complete="off" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="flex">
              <el-input type="text" class="yanZhengma" v-model="registerFrom.code" auto-complete="off"
                placeholder="请输入验证码"></el-input>
              <div>
                <img :src="captchaUrl + '?key=' + key + '&t=1111'" @click="clickImg()" width="100px" height="40px" />
              </div>
            </div>
            <!-- <el-button >发送验证码</el-button> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="button" @click="toSubmitForm()">注册</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 登录 -->

      <el-tab-pane label="登录" name="first">
        <el-form ref="loginForm" :model="loginForm" class="register-container" label-position="left" label-width="50px"
          :rules="loginRules">
          <!-- 用户名 -->
          <p style="margin-bottom: 150px"></p>

          <el-form-item label="账号" prop="userLoginId">
            <el-input type="text" v-model="loginForm.userLoginId" auto-complete="off" placeholder="用户名/邮箱"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="loginPassword">
            <el-input placeholder="密码" type="password" @keypress.enter.native="toLogin" v-model="loginForm.loginPassword"
              auto-complete="off" show-password>
            </el-input>
          </el-form-item>
          <el-button @click="toLogin()">登录</el-button>
          <!-- @keypress.enter="getCheckData" -->
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
import { setItem } from "@/utils/cookieUtil";
import sparkMd5 from "spark-md5";
import { Empty } from 'element-ui';

export default {
  name: "login",
  data() {
    //规则验证
    // 注册验证
    let checkuName = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("用户名至少5位"));
      } else if (!/^\S*$/.test(value)) {
        callback(new Error("不能含有空格"));
      } else if (value.length > 12) {
        callback(new Error("用户名不超过12位"));
      }
      callback();
    };
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 8) {
        callback(new Error("密码至少8位"));
      } else if (!/^\S*$/.test(value)) {
        callback(new Error("不能含有空格"));
      } else if (value.length > 16) {
        callback(new Error("密码不超过16位"));
      } else {
        if (this.registerFrom.checkPass !== "") {
          this.$refs.registerFrom.validateField("checkPass");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerFrom.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    let checkEmail = (rule, value, callback) => {
      // 判断输入框中是否输入
      if (!value) {
        callback(new Error("邮箱不能为空"));
      }
      //正则表达式进行验证
      if (!/(^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/.test(value)) {
        callback(new Error("邮箱格式不正确"));
      }
      callback();
    };

    let checkCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      }
      callback();
    }
    //  登录账号
    let checkUserLoginId = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入账号"));
      }
      callback();
    }
    let checkLoginPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      }
      callback();
    }


    return {
      activeName: "first",
      captchaUrl: "http://localhost:3333/api/captcha/shear",
      key: Math.random(),
      loginForm: {
        userLoginId: "",
        loginPassword: "",
      },
      registerFrom: {
        username: "",
        email: "",
        password: "",
        checkPass: "",
        code: "", //验证码
      },
      loginRules: {
        userLoginId: [{ validator: checkUserLoginId, trigger: "blur" }],
        loginPassword: [{ validator: checkLoginPassword, trigger: "blur" }],
      },
      registerRules: {
        username: [{ validator: checkuName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    clickImg() {
      this.captchaUrl = this.captchaUrl + "?key=" + this.key + "&t=" + Date.now();

    },
    //登录提交方法
    toLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.login();
        }
      });
    },
    async login() {
      var spark = new sparkMd5();
      spark.append(this.loginForm.loginPassword);
      let res = await this.$store.dispatch("userLogin", {
        username: this.loginForm.userLoginId,
        password: spark.end(),
      });
      if (!res.success) {
        this.$message({
          message: res.message,
          type: "error",
        });
      } else {
        this.$message({
          message: "登录成功",
          type: "success",
        });
        setItem("token", res.data);
        this.$router.push({ path: "/disk/home?category=0" });
      }
    },
    // 注册提交方法
    toSubmitForm() {
      this.$refs.registerFrom.validate((valid) => {
        if (valid) {
          this.submitForm();
        }
      });
    },
    async submitForm() {
      var spark = new sparkMd5();
      spark.append(this.registerFrom.password);
      let res = await this.$store.dispatch("userRegister", {
        username: this.registerFrom.username,
        password: spark.end(),
        email: this.registerFrom.email,
        key: this.key,
        code: this.registerFrom.code
      });
      if (!res.success) {
        this.$message({
          message: res.message,
          type: "error",
        });
        this.clickImg()
      } else {
        this.$message({
          message: "注册成功,请登录",
          type: "success",
        });
        this.$refs["registerFrom"].resetFields();
        this.clickImg()
        this.$router.push({ path: "/login" });
      }
    },
  },
};
</script>
 
<style  scoped>
#poster {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-image: url(https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg);
}

.yanZhengma {
  width: 60%;
  margin-right: 17px;
}

.button {
  width: 100%;
  /* border: none; */
  border-radius: 20px;
  margin-left: -50px;
}

::v-deep .el-form-item__label {
  text-align: justify;
  text-align-last: justify;
}

.register-title {
  padding-right: 200px;
  font-size: 35px;
  margin-bottom: 7px;
}

.register-container>>>.el-form-item__label {
  font-size: 12px;
}

.wind {
  position: absolute;
  top: 15%;
  right: 140px;
  width: 360px;
  height: 500px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 10px 25px;
}

.wind .el-tab-pane {
  text-align: center;
}

.wind>>>.el-tabs__item {
  padding: 0 0;
  width: 180px;
  text-align: center;
}

.flex {
  display: flex;
}
</style>